<template>
	<view class="container">
		<carHeader :title="title"></carHeader>
		<view>
			<uni-group mode="card" class="firstGroup">
				<!-- 流程图 -->
				<view class="bzt">
					<view class="bluey">预约服务</view>
					<view class="greedy">支付订单</view>
					<view class="redy">门店服务</view>
				</view>
				<!--定位，订单人，预约时间，预约车辆  -->
				<view>
					<uni-list :border="false">
						<uni-list-item :title="name" thumb="/static/车联网服务-04汽车保养-06确认订单_slices/商家.png" :note="address"
							:border="false" thumb-size="sm">
						</uni-list-item>

						<uni-list-item :title="user.name" thumb="/static/车联网服务-04汽车保养-06确认订单_slices/人员.png"
							:rightText="user.phone" :border="false" thumb-size="sm">
						</uni-list-item>

						<uni-list-item :border="false" title="立即预约" thumb="/static/车联网服务-04汽车保养-06确认订单_slices/车辆-01.png"
							thumb-size="sm" clickable @click="disponment">
							<template v-slot:footer>
								<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png"
									mode="widthFix"></image>
							</template>
						</uni-list-item>

						<uni-list-item :border="false" :title="scar.type"
							thumb="/static/车联网服务-04汽车保养-06确认订单_slices/车辆-01@2x(1).png" thumb-size="sm" clickable>
							<template v-slot:footer>
								<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png"
									mode="widthFix"></image>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<!-- 产品服务 -->
				<view class="ddxx">
					<uni-list :border="false">
						<uni-list-item :border="false" title="产品服务">
							<template v-slot:footer>
								<font class="fwcp">共选择<font class="dsx">{{length}}项</font>服务产品
								</font>
							</template>
						</uni-list-item>
						<uni-list-item :border="false" v-for="(item,index) in spList" :title="item.name">
							<template v-slot:footer>
								<font class="qian">￥{{item.oldPrice}}</font>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
				<!-- 代金券 -->
				<view>
					<uni-list :border="false">
						<uni-list-item :border="false" title="代金券/优惠卷"
							thumb="/static/车联网服务-04汽车保养-06确认订单_slices/优惠券.png" thumb-size="sm" clickable>
							<template v-slot:footer>
								<!-- <text class="qian">-{{djq[1].money}}元</text> -->
								<text class="qian">-10元</text>
								<image class="slot-image" src="/static/车联网服务-04汽车保养-06确认订单_slices/收起箭头小 拷贝.png"
									mode="widthFix"></image>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</uni-group>

			<view class="tjdd">
				<uni-list :border="false">
					<uni-list-item :border="false">
						<template v-slot:header>
							<view class="slot-box" @click="lxkf">
								<image src="/static/车联网服务-04汽车保养-06确认订单_slices/客服.png" mode="widthFix"></image>
								<text class="slot-text">联系客服</text>
							</view>
						</template>
						<template v-slot:footer>
							<font class="hjje">合计：￥{{allmoney}}元</font>
							<button type="primary" size="mini" class="tjan" @click="tjdd">提交订单</button>
						</template>
					</uni-list-item>
				</uni-list>
			</view>


		</view>
		<!--预约弹出框  -->
		<uni-popup ref="inputDialog" type="dialog">
			<view class="ddxx yysjtck">
				<uni-list :border="false">
					<uni-list-item>
						<template v-slot:body>
							<view style="text-align: center;width: 100%;">
								<view style="color: black;">预约时间</view>
								<view style="opacity: 0.7;">
									<uni-dateformat :date="now"></uni-dateformat>
								</view>
							</view>
						</template>
					</uni-list-item>
					<uni-list-item :border="false">
						<template v-slot:body>
							<uni-datetime-picker type="datetime" v-model="time" @change="changeLog" />
						</template>
					</uni-list-item>

					<uni-popup-dialog title=" " :before-close="true" @close="close" @confirm="confirm">
					</uni-popup-dialog>

				</uni-list>
			</view>
		</uni-popup>

		<!-- 联系客服底部弹出框 -->
		<uni-popup ref="customerService" type="bottom" background-color="#fff">
			<uni-list :border="false">
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;">{{customerService.phone}}</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;" @click="copy">复制</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view style="font-size: 35rpx; margin: auto;" clickable @click="qxbh">取消拨号</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-popup>
		<!-- 提交订单 -->
		<uni-popup ref="submit" background-color="#fff">

			<view class="zhifu">
				<view class="qsmm">
					<uni-icons type="closeempty" size="15" @click="gbdd" style=""></uni-icons>
					<view style="margin-left: 160rpx;" class="clos">请输入密码</view>
				</view>

				<view style="width: 640rpx; height: 200rpx; margin-top: 30rpx;" background-color="#fff">
					<view
						style="width: 580rpx; height: 200rpx; margin: 0 30rpx; text-align: center;border-bottom: 4rpx #eee solid;">
						<view>车辆服务平台</view>
						<view style="font-size: 70rpx;margin-top: 25rpx;">￥{{allmoney}}</view>
					</view>
				</view>

				<view class="mima">
					<view class="fukuan">
						<view>支付方式</view>
						<view>零钱<uni-icons type="right" size="15" @click="gbdd" color="#858585"></uni-icons></view>
					</view>

					<view class="input-wrap" style="font-size: 42rpx;">
						<!-- 页面显示  加密形式 给此input加上 password="true" 属性-->
						<input class="input1" type="number" v-for="(item, index) in input_len" @tap="onInput"
							:key="index" :value="input_val.length >= index + 1 ? input_val.length : ''" />
						<!-- 实际监听 -->
						<input class="input2" v-if="isFocus" @blur="blurInput" @input="setInput" v-model="input_val"
							:maxlength="input_len" :focus="true" />
					</view>
				</view>
				<button @click="goTochengg">确认</button>
			</view>


		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				name: '',
				address: '',
				allmoney: 0,
				length: 0,
				list: [],
				title: "确认订单",
				// 门店信息
				shop: {},
				// 用户信息
				user: {
					name: "",
					phone: ""
				},
				customerService: {
					id: 1,
					name: "客服1👌",
					phone: "13569798541"
				},
				// 选中的车辆信息
				scar: {
					id: 1,
					type: "奔驰FWE4/豫A56487"
				},
				spList: [],
				ids: [],
				djq: [{
					id: 1,
					money: 10
				}, {
					id: 2,
					money: 10
				}],
				now: Date.now(),
				// 时间
				time: '',
				// 输入密码
				input_len: 6, // 验证码长度
				input_val: '', // 验证码的值
				isFocus: false,

			};

		},
		onLoad(options) {
			// 从URL查询参数中获取list字符串  
			let listStr = options.list;
			// 如果存在且是有效的JSON字符串，则反序列化回对象  
			if (listStr && typeof listStr === 'string') {
				try {
					this.spList = JSON.parse(decodeURIComponent(listStr));
					this.length = this.spList.length;
					this.spList.forEach(res => {
						this.allmoney = (this.allmoney * 100 + res.oldPrice * 100) / 100
					});
					console.log(this.spList);
					this.onlonddata(this.spList[0].shopId);
				} catch (error) {
					console.error('解析列表数据出错', error);
				}
			};
			this.felectuser(1);
		},
		methods: {
			onlonddata(id) {
				uni.request({
					url: 'http://localhost:8080/user/selectShopById/' + id, // 改为你的实际接口地址  
					method: 'POST', // 或者 'POST'  
					success: (res) => {
						// 请求成功，res为服务器返回的数据  
						console.log(res.data.faceImg)
						if (res.statusCode === 200) {
							this.name = res.data.shopName
							this.address = res.data.area + ' ' + res.data.address
						} else {
							// 请求失败或服务器返回错误状态码  
							console.error('请求失败', res);
						}
					},
					fail: (err) => {
						// 请求失败  
						console.error('请求失败', err);
					}
				});
			},
			felectuser(id) {
				if (id > 0) {
					uni.request({
						url: 'http://localhost:8080/user/selectuser/' + id, // 改为你的实际接口地址  
						method: 'POST', // 或者 'POST'  
						success: (res) => {
							console.log(res.data.uName)
							console.log(res.data.pNumber)
							this.user.name = res.data.uName
							this.user.phone = res.data.pNumber
						},
						fail: (err) => {
							console.error('请求失败', err);
						}
					});
				} else {
					uni.showToast({
						title: '用户不存在',
						icon: 'none',
						duration: 2000
					});
				}


			},
			disponment() {
				this.$refs.inputDialog.open();
			},
			close() {
				this.time = '';
				this.$refs.inputDialog.close();
			},
			confirm(value) {
				console.log(value)
				this.$refs.inputDialog.close();
			},
			changeLog(e) {
				this.time = e
			},
			lxkf() {
				this.$refs.customerService.open();
			},
			qxbh() {
				this.$refs.customerService.close();
			},
			copy() {
				uni.setClipboardData({
					data: this.customerService.phone,
					success: function() {
						console.log('success');
					}
				});
				this.$refs.customerService.close();
			},
			tjdd() {
				this.$refs.submit.open();
			},
			gbdd() {
				this.$refs.submit.close();
			},

			onInput() {
				this.isFocus = true;
			},
			blurInput() {
				this.isFocus = false;
			},
			setInput(e) {

				this.input_val = e.detail.value;

				if (this.input_val.length == 6) {
					uni.navigateTo({
						url: ""
					})
				}
			},
			goTochengg() {
				this.generateRandomOrderId();
				console.log(this.orderId);

				this.spList.forEach(item => {
					// 直接在item上添加新属性  
					item.ddNumber = this.orderId;
					item.shifuPrice = item.oldPrice
					item.ddFwId = item.serviceSortId
				});
				console.log(this.spList);
				let jsonData = JSON.stringify(this.spList);
				uni.request({
					url: 'http://localhost:8080/user/insrttAllorder', // 改为你的实际接口地址  
					method: 'POST', // 或者 'POST'
					header: {
						'content-type': 'application/json' // 设置请求头  
					},
					data: jsonData,
					success: (res) => {
						if (res.data > 0) {
							uni.navigateTo({
								url: '/pages/orderZhifu/orderZhifu?allMoney=' + this.allmoney +
									'&orderId=' + this.orderId
							})
						}else{
							uni.showToast({
								title: '支付失败！',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});


			},
			generateRandomOrderId() {
				// 定义可能的字符集  
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
				let result = '';
				// 循环11次来生成十一位的编号  
				for (let i = 0; i < 11; i++) {
					// 使用Math.random()生成一个随机数，并通过取模运算从chars中选择一个字符  
					const randomChar = chars.charAt(Math.floor(Math.random() * chars.length));
					result += randomChar;
				}
				this.orderId = result;
			}

		}

	}
</script>

<style lang="scss">
	.bzt {
		width: 100%;
		height: 100rpx;
		display: flex;
		position: relative;
		background-color: transparent;
		justify-content: space-between;
		border-bottom: 5rpx #eee solid;
		margin: 20rpx 0;
		padding: 20rpx 0rpx;
	}


	.bluey {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background-image: linear-gradient(#3688fe, #0A64E7);
	}

	.greedy {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #fff;
		background-image: linear-gradient(#17E5B8, #01C278);
	}

	.redy {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		color: #fff;
		background-image: linear-gradient(#FF9572, #F4410A);
	}

	.firstGroup {
		position: relative;
		top: -200rpx;
	}

	.slot-image {
		width: 20rpx;
		height: 20rpx;
	}

	.tjdd {
		position: fixed;
		// margin: 30rpx auto;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;

		image {
			margin-right: 10px;
			width: 30px;
			height: 30px;
		}

		.hjje {
			margin: auto 20rpx;
			color: #F4410A;
		}
	}

	.zhifu {
		width: 640rpx;
		height: 600rpx;
		text-align: center;


		.qsmm {
			position: relative;
			width: 640rpx;
			display: flex;
			padding: 20rpx 10rpx;

			.clos {
				width: 40%;
				position: absolute;
				font-size: 40rpx;
			}
		}

	}

	.mima {
		width: 580rpx;
		height: 200rpx;
		margin: 0 30rpx;

		.fukuan {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 20rpx;
			color: #ccc;
		}
	}

	.input-wrap {
		// margin-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.input1 {
		width: 70rpx;
		height: 70rpx;
		background-color: #eee;
		border-radius: 10rpx;
		justify-content: center;
		text-align: center;
	}

	.input2 {
		height: 0;
		width: 0;
	}
</style>